<template>
  <a-table
      class="myTable"
      v-bind="{
        ...$attrs,
      }"
      size="small"
      bordered
      :pagination="false"
    >
      <!-- 自定义渲染单元格 -->
       <template #bodyCell="{ column, record }">
        <template v-for="slotName of slots">
          <slot
            v-if="slotName === column.dataIndex"
            :name="slotName"
            :column="column"
            :record="record"
          ></slot>
        </template>

      </template>
    <template #expandedRowRender="{ record }" v-if="slots.includes('expandedRowRender')">
      <slot name="expandedRowRender" :record="record"></slot>
    </template>
    <template #headerCell="{ column, record }" v-if="slots.includes('headerCell')">
      <slot name="headerCell" :column="column" :record="record"></slot>
    </template>
    <template #expandIcon="props" v-if="slots.includes('expandIcon')">
      <slot name="expandIcon" :props="props"></slot>
    </template>
    </a-table>

    <a-pagination
      style="text-align:right; margin-top:10px"
      v-if="localPagination"
      :pageNo="localPagination.pageNo"
      :pageSize="localPagination.pageSize"
      :showSizeChanger="true"
      :pageSizeOptions="['10', '20','50','100','300']"
      :total="localPagination.total"
      v-model:current="localPagination.pageNo"
      @change="onChange"
      :show-total="(total) => `共 ${total} 条数据`"
    />
</template>

<script setup>
const emits = defineEmits(['paginationChange'])
const props = defineProps({
  slots: {
    type: Array,
    default: () => [],
  },
})


const localPagination = defineModel('localPagination')


const onChange = (pageNo, pageSize) => {
  localPagination.value.pageNo = pageNo
  localPagination.value.pageSize = pageSize
  emits('paginationChange')
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

</script>

<style lang="less">
.myTable {
  margin-top: 15px;
}
.myTable{
  :deep(.ant-descriptions-row >td ) {
    padding: 1px;
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #E4F7FF !important;
  }
}
.myTable.ant-table-wrapper .ant-table-thead tr > th{
  background-color: rgba(250,250,250);
}
</style>
